<template>
	<view class="">
		<view class="">
			<my-calendar @changeDate="changeDate" :point-list="pointList" :show="fold" ref="calendar"
				@currentYearMonth="currentYearMonth" @showFold="showFold" :showSift="true" @sift="sift"></my-calendar>
				
			<!-- 没有数据时 -->
			<view :style="{height:heightXY}" v-if="dataList.length==0"
				style="display: flex;align-items: center;justify-content: center;">
				<view>
					<view style="display: flex;align-items: center;justify-content: center;">
						<image :src="no_data" style="width: 300rpx;height: 300rpx;"></image>
					</view>
					<view style="display: flex;align-items: center;justify-content: center;">
						<text style="font-weight: 400;color: #333333;font-size: 28rpx;">暂无数据</text>
					</view>
				</view>
			</view>
			
			<!-- 有数据时 -->
			<view :style="{height:heightXY}" v-if="dataList.length>0">
				<view style="height: 48rpx;"></view>
				<view class="ridata">
					<text style="margin-left: 32rpx;">日程内容</text>
				</view>
				
				<scroll-view scroll-y="true" :style="{height:heightXY2}">
					<view v-for="(item,index) in dataList" :key="index" @click="toDetail(item,index)">
						<view style="height: 24rpx;"></view>
						<view class="data-item">
							<view class="data-item-shu"></view>
							<text class="data-item-text">{{item.beginTime}} {{item.title}}</text>
						</view>
						
					</view>
				</scroll-view>
				
				
			</view>
			
			<view class="view-add-bttom" :style="{marginBottom:marginBottom}" v-if="role!='0'">
				<image src="../../../../static/phone/add-data.png" style="width: 100rpx;height: 100rpx;" @click="addData"></image>
			</view>
		</view>
		<tab-bar :selected="1"></tab-bar>
	</view>
</template>

<script>
	import tabBar from '../../common/tab-bar.vue'
	import myCalendar from '../../common/myCalendar/myCalendar.vue'
	import verify from '@/pages/utils/verifyUtils.js'
	let app = ""
	export default {
		components: {
			tabBar,
			myCalendar
		},
		data() {
			return {
				role: '',
				roleUrl:'',
				needAdapt:false,
				pointList: [],
				dataList: [],
				fold: true,
				heightXY: '',
				heightXY2:'',
				marginBottom:0,
				
				allDayList:[],
				
				detailIndex:-1,
				today:{},
				no_data:getApp().globalData.baseImageUrl+'/no-data.png',
				
				
				caseId:'',
			}
		},
		onLoad() {
			let _this = this
			app = getApp()
			_this.role = app.globalData.role
			console.log('_this.role',_this.role)
			_this.roleUrl =  _this.$roleUrl({tab:_this.role})
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			if(_this.needAdapt){
				_this.marginBottom = '244rpx'
			}else{
				_this.marginBottom = '176rpx'
			}
			
			this.today = {
				year: new Date().getFullYear(),
				month: new Date().getMonth() + 1,
				day: new Date().getDate()
			}
			
			_this.heightChange()

		},
		onShow() {
			let dispos = uni.getStorageSync("schedele")
			if(verify.isNotEmpty(dispos)){
				if(dispos==='delete'){
					this.dataList.splice(this.detailIndex,1)
					this.getDadeData(this.thisYear,this.thisMonth)

				}else if(dispos==='add'){
					console.log(this.thisYear,this.thisMonth)
					this.getDadeData(this.thisYear,this.thisMonth)
				}
				uni.setStorageSync("schedele",null)
				
			}
			
			let items = uni.getStorageSync("caseBelongs")
			console.log(items)
			if (items != null && items != '' && items != undefined) {
				this.dateList = []
				uni.setStorageSync("caseBelongs", null)
				this.caseId = items.id
				
				//要重新请求数据  带着caseId
				this.getDadeData(this.thisYear,this.thisMonth)
			}
			
		},
		methods: {
			async getDadeData(v1,v2){
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseTodo/listByMonth/${v1}/${v2}`,
					method:'POST',//默认是GET
				})
				console.log('指定月份的日程列表',res)
				if(res.data.code==200){
					let list = res.data.data
					_this.pointList = []
					for (var i = 0; i < list.length; i++) {
						if(list[i]['isExistSchedule']['code']==1){
							//表示该天有日程
							let year = list[i]['year']
							let month = list[i]['month'] < 10 ? '0'+''+list[i]['month'] : list[i]['month']
							let day = list[i]['day']< 10 ? '0'+''+list[i]['day'] : list[i]['day']
							 
							let yearmonthday = year+'-'+month+'-'+day
						
							
							_this.pointList.push(yearmonthday)
							
						}
					}
					_this.allDayList = list
					// console.log(_this.pointList)
					_this.$refs.calendar.fomatePointTime(v1,v2,_this.pointList)
					
				
					for (var i = 0; i < list.length; i++) {
						if(list[i]['year']===this.today.year &&list[i]['month']===this.today.month
						&&list[i]['day']===this.today.day&&list[i]['isExistSchedule']['code']==1){
							// console.log(list[i]['caseTodoVOList'])
							_this.dataList = list[i]['caseTodoVOList']
						}
					}
					
					
				}
			},
			/**
			 * 日期选择,获取已选择日期的日程
			 */
			changeDate(val) {
				// console.log('年月日',val)
				let _this = this
				let year = val.year
				let month = val.month
				let day = val.day
				let list = _this.allDayList
				_this.dataList = []
				_this.today={
					year:year,
					month:month,
					day:day
				}
				uni.setStorageSync("today",_this.today)
				for (var i = 0; i < list.length; i++) {
					if(list[i]['year']===year &&list[i]['month']===month
					&&list[i]['day']===day&&list[i]['isExistSchedule']['code']==1){
						// console.log(list[i]['caseTodoVOList'])
						_this.dataList = list[i]['caseTodoVOList']
					}
				}
			},

			/**
			 * 当前年月
			 */
			currentYearMonth(val) {
				// console.log('年月',val)
				let _this = this
				let thisYear = val.year
				let thisMonth = val.month
				_this.dataList = []
				_this.thisMonth = thisMonth
				_this.thisYear = thisYear
				setTimeout(function() {
					_this.getDadeData(thisYear,thisMonth)
				}, 100);
				
			},

			/**
			 * 展开 折叠
			 */
			showFold(val) {
				// console.log(val)
				this.fold = val
				this.heightChange()
			},
			
			/**
			 * 点击了筛选
			 */
			sift(){
				console.log('筛选')
				uni.navigateTo({
					url:'./caseBelongs'
				})
			},

			/**
			 * 底部高度
			 */
			heightChange() {
				let _this = this
				let needAdapt = _this.needAdapt
				if (_this.fold) {
					if (needAdapt) {
						_this.heightXY = (app.globalData.windowHeight - 400) * 2
					} else {
						_this.heightXY = (app.globalData.windowHeight - 365) * 2
					}
				} else {
					if (needAdapt) {
						_this.heightXY = (app.globalData.windowHeight - 215) * 2
					} else {
						_this.heightXY = (app.globalData.windowHeight - 178) * 2
					}
				}
				
				_this.heightXY2 = (_this.heightXY-92)+'rpx'
				_this.heightXY = _this.heightXY+'rpx'
			},
			
			/**
			 * 点击新增日程
			 */
			addData(){
				uni.navigateTo({
					url:'./addSchedule?tag=add'
				})
			},
			
			/**
			 * 去详情
			 */
			toDetail(item,index){
				console.log(item)
				this.detailIndex = index
				// uni.setStorageSync("detailIndex",this.detailIndex)
				// uni.setStorageSync("thisYear",this.thisYear)
				// uni.setStorageSync("thisMonth",this.thisMonth)
				uni.navigateTo({
					url:'./scheduleDetail?id='+item.id
				})
			},
		},
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style scoped>
	.ridata{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}
	.data-item{
		width: 686rpx;
		height: 64rpx;
		background: #E8F7FB;
		display: flex;
		align-items: center;
		margin-left: 32rpx;
	}
	.data-item-shu{
		width: 8rpx;
		height: 64rpx;
		background: #2DA9C5;
	}
	.data-item-text{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2DA9C5;
		margin-left: 16rpx;
	}
	
	.view-add-bttom{
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		right: 0;
		bottom: 0;
		margin-right: 32rpx;
	}
	/* /deep/ .uni-calendar__content{
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.0500);
	}
	/deep/ .uni-calendar__header{
		    position: relative !important;
		    display: flex !important;
		    flex-direction: row;
		    align-items: center !important;
			justify-content: left !important;
		    height: 88rpx !important;
			border-bottom-color: #ffffff !important;
			border-bottom-style: solid !important;
			border-bottom-width: 0rpx !important;

	}
	/deep/ .uni-calendar__header-btn-box{
		width: 88rpx !important;
		height: 88rpx !important;
	}
	/deep/ .uni-calendar__header-btn{
		width: 12rpx !important;
		height: 12rpx !important;
		border-left-color: #666666 !important;
		border-left-style: solid !important;
		border-left-width: 4rpx !important;
		border-top-color: #666666 !important;
		border-top-style: solid !important;
		border-top-width: 4rpx !important;
	}
	
	/deep/ .uni-calendar__header-text{
	
		font-weight: 400 !important;
	
	}
	/deep/ .uni-calendar__backtoday{
		visibility:hidden !important;
	}
	
	/deep/ .uni-calendar__weeks-item{
		width: 88rpx !important;
		height: 88rpx !important;
		display: flex !important;
		 align-items: center !important;
		  justify-content: center !important; 
		
	}
	/deep/ .uni-calendar-item__weeks-box-item{
		width: 88rpx !important;
		height: 88rpx !important;
		display: flex !important;
		 align-items: center !important;
		  justify-content: center !important; 
	}
	/deep/ .uni-calendar-item--checked {
	    background-color: #2DA9C5 !important;
	    color: #ffffff !important;
		width: 88rpx !important;
		height: 88rpx !important;
		border-radius: 88rpx !important;
		display: flex !important;
		 align-items: center !important;
		  justify-content: center !important; 
	}
	/deep/ .uni-calendar-item--isDay-text{
		color: #2DA9C5 !important;
	}
	/deep/ .uni-calendar-item--isDay{
		background-color: #2DA9C5 !important;
		color: #ffffff !important;
		border-radius: 88rpx !important;
	} */
</style>
